<template>
<!-- 资讯详情页面 -->
    <div class="fa snack">
            <div class="top container">
                <img src="../assets/img/logo.gif" alt="" />
                <div class="box">
                    <div>
                    <router-link to="/search" tag="input"
                        type="search"
                        class="inp1"
                        placeholder="输入菜名、食材、作者"
                        
                    />
                    <router-link to="/search" tag="input" type="submit" class="inp2 fa" value=""  />
                    </div>
                </div>
            </div>
            <div class="container zxtitle">
                <h1>南方菜市场的服务到底有多周到，北方人见了直呼震撼！</h1>
                <div class="divsize">
                    <span>7个月前</span>
                    <span>点击：199</span>
                    <span>评论：0</span>
                </div>
            </div>
            <div class="zxitem" :style="{'height':ind==1? auto:'1016px'}">
                <div v-for="(item,index) in zxitemlists" :key="index">
                    <p>
                        <img :src="item.img" alt="">
                        {{item.p}}
                    </p>
                    <h2>{{item.h2}}</h2>
                </div>
                <div class="zxitempl">
                    <span>5年前</span> &nbsp;     
                    <span>阅读：{{this.read}}</span>&nbsp;
                    <span @click="comment">评论：{{this.num}}</span>
                </div>
                <div v-show="!ind==1" class="read" @click="openlists" >展开继续阅读 ↓</div>
            </div>
            <div class="site">
                <p class="booksite">本文地址：
                    <a href="" title="">https://m.meishiq.com/news/1000151</a>
                </p>
                    <div class="tags">标签：
                        <a href="">餐饮行业</a> 
                        <a href="" >菜市场</a>
                        <a href="" >北方人</a>
                    </div>
            </div>
            <div class="Previous">
                <p class="up" >上一篇：<a href="">新疆美食之【马肉纳仁】</a></p>
                <p class="down" >下一篇：<a href="">新疆美食之【马肉纳仁】</a></p>
            </div>
            <!-- 相关内容推荐 -->
            <div class="zxcontent">
                <h1>相关内容推荐</h1>
                <ul>
                    <li>
                        <a >
                            教师有职业病烦恼？7种蔬菜轻松摆脱慢性咽炎
                            <div>
                                <span>5年前</span> &nbsp;     
                                <span>阅读：81</span>&nbsp;
                                <span>评论：0</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 热门菜谱推荐 -->
            <div class="hot">
                <h2 class="hoth2">热门菜谱推荐</h2>
                <div class="hot-list">
                    <div class="hot-item">
                        <img src="../assets/img/hot01.jpg" alt="">
                        <h3>酸甜可口的柠檬塔</h3>
                        <p>做点心时常常会用到柠檬，比如芝士蛋糕和果酱里最常用到的柠檬汁、用柠檬来做装饰，甜点中更离不开柠檬：柠檬蛋糕，柠檬cookies，面包里面，柠檬塔，还有柠檬糖果，等等。柠檬风味到处受人欢迎，柠檬的营养成分是不言而喻的，大家都知道的丰富的味维生素C，痛快体验淋漓尽致的“酸酸”口感。</p>
                    </div>
                    <div class="hot-item">
                        <img src="../assets/img/hot01.jpg" alt="">
                        <h3>酸甜可口的柠檬塔</h3>
                        <p>做点心时常常会用到柠檬，比如芝士蛋糕和果酱里最常用到的柠檬汁、用柠檬来做装饰，甜点中更离不开柠檬：柠檬蛋糕，柠檬cookies，面包里面，柠檬塔，还有柠檬糖果，等等。柠檬风味到处受人欢迎，柠檬的营养成分是不言而喻的，大家都知道的丰富的味维生素C，痛快体验淋漓尽致的“酸酸”口感。</p>
                    </div>
                    <div class="hot-item">
                        <img src="../assets/img/hot01.jpg" alt="">
                        <h3>酸甜可口的柠檬塔</h3>
                        <p>做点心时常常会用到柠檬，比如芝士蛋糕和果酱里最常用到的柠檬汁、用柠檬来做装饰，甜点中更离不开柠檬：柠檬蛋糕，柠檬cookies，面包里面，柠檬塔，还有柠檬糖果，等等。柠檬风味到处受人欢迎，柠檬的营养成分是不言而喻的，大家都知道的丰富的味维生素C，痛快体验淋漓尽致的“酸酸”口感。</p>
                    </div>
                    <div class="hot-item">
                        <img src="../assets/img/hot01.jpg" alt="">
                        <h3>酸甜可口的柠檬塔</h3>
                        <p>做点心时常常会用到柠檬，比如芝士蛋糕和果酱里最常用到的柠檬汁、用柠檬来做装饰，甜点中更离不开柠檬：柠檬蛋糕，柠檬cookies，面包里面，柠檬塔，还有柠檬糖果，等等。柠檬风味到处受人欢迎，柠檬的营养成分是不言而喻的，大家都知道的丰富的味维生素C，痛快体验淋漓尽致的“酸酸”口感。</p>
                    </div>
                    <div class="hot-item">
                        <img src="../assets/img/hot01.jpg" alt="">
                        <h3>酸甜可口的柠檬塔</h3>
                        <p>做点心时常常会用到柠檬，比如芝士蛋糕和果酱里最常用到的柠檬汁、用柠檬来做装饰，甜点中更离不开柠檬：柠檬蛋糕，柠檬cookies，面包里面，柠檬塔，还有柠檬糖果，等等。柠檬风味到处受人欢迎，柠檬的营养成分是不言而喻的，大家都知道的丰富的味维生素C，痛快体验淋漓尽致的“酸酸”口感。</p>
                    </div>
                    <div class="hot-item">
                        <img src="../assets/img/hot01.jpg" alt="">
                        <h3>酸甜可口的柠檬塔</h3>
                        <p>做点心时常常会用到柠檬，比如芝士蛋糕和果酱里最常用到的柠檬汁、用柠檬来做装饰，甜点中更离不开柠檬：柠檬蛋糕，柠檬cookies，面包里面，柠檬塔，还有柠檬糖果，等等。柠檬风味到处受人欢迎，柠檬的营养成分是不言而喻的，大家都知道的丰富的味维生素C，痛快体验淋漓尽致的“酸酸”口感。</p>
                    </div>
                    <div class="hot-item">
                        <img src="../assets/img/hot01.jpg" alt="">
                        <h3>酸甜可口的柠檬塔</h3>
                        <p>做点心时常常会用到柠檬，比如芝士蛋糕和果酱里最常用到的柠檬汁、用柠檬来做装饰，甜点中更离不开柠檬：柠檬蛋糕，柠檬cookies，面包里面，柠檬塔，还有柠檬糖果，等等。柠檬风味到处受人欢迎，柠檬的营养成分是不言而喻的，大家都知道的丰富的味维生素C，痛快体验淋漓尽致的“酸酸”口感。</p>
                    </div>
                    <div class="hot-item">
                        <img src="../assets/img/hot01.jpg" alt="">
                        <h3>酸甜可口的柠檬塔</h3>
                        <p>做点心时常常会用到柠檬，比如芝士蛋糕和果酱里最常用到的柠檬汁、用柠檬来做装饰，甜点中更离不开柠檬：柠檬蛋糕，柠檬cookies，面包里面，柠檬塔，还有柠檬糖果，等等。柠檬风味到处受人欢迎，柠檬的营养成分是不言而喻的，大家都知道的丰富的味维生素C，痛快体验淋漓尽致的“酸酸”口感。</p>
                    </div>
                </div>
            </div>
            <!-- 热门文章推荐 -->
            <div class="hotarticle">
                <h2>热门文章推荐</h2>
                <ul>
                    <li>
                        <a href="">
                            <h3>抄手怎么包?抄手的6种包法图文解析
                            </h3>
                            <p>
                                <span>5年前</span>&nbsp;
                                <span>阅读：5657</span>&nbsp;
                                <span>评论：0</span>&nbsp;
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <h3>抄手怎么包?抄手的6种包法图文解析
                            </h3>
                            <p>
                                <span>5年前</span>&nbsp;
                                <span>阅读：5657</span>&nbsp;
                                <span>评论：0</span>&nbsp;
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <h3>抄手怎么包?抄手的6种包法图文解析
                            </h3>
                            <p>
                                <span>5年前</span>&nbsp;
                                <span>阅读：5657</span>&nbsp;
                                <span>评论：0</span>&nbsp;
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <h3>抄手怎么包?抄手的6种包法图文解析
                            </h3>
                            <p>
                                <span>5年前</span>&nbsp;
                                <span>阅读：5657</span>&nbsp;
                                <span>评论：0</span>&nbsp;
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <h3>抄手怎么包?抄手的6种包法图文解析
                            </h3>
                            <p>
                                <span>5年前</span>&nbsp;
                                <span>阅读：5657</span>&nbsp;
                                <span>评论：0</span>&nbsp;
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <h3>抄手怎么包?抄手的6种包法图文解析
                            </h3>
                            <p>
                                <span>5年前</span>&nbsp;
                                <span>阅读：5657</span>&nbsp;
                                <span>评论：0</span>&nbsp;
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <h3>抄手怎么包?抄手的6种包法图文解析
                            </h3>
                            <p>
                                <span>5年前</span>&nbsp;
                                <span>阅读：5657</span>&nbsp;
                                <span>评论：0</span>&nbsp;
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <h3>抄手怎么包?抄手的6种包法图文解析
                            </h3>
                            <p>
                                <span>5年前</span>&nbsp;
                                <span>阅读：5657</span>&nbsp;
                                <span>评论：0</span>&nbsp;
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <h3>抄手怎么包?抄手的6种包法图文解析
                            </h3>
                            <p>
                                <span>5年前</span>&nbsp;
                                <span>阅读：5657</span>&nbsp;
                                <span>评论：0</span>&nbsp;
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 底部固定 -->
            <div class="bottom container">
        <ul>
            <li>
            <router-link tag="a" to="/home">
                <span id="bottom-home"></span>
                <p>首页</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/init">
                <span id="bottom-top"></span>
                <p>排行</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/classify">
                <span id="bottom-list"></span>
                <p>分类</p>
            </router-link>
            </li>
            <li>
                <router-link tag="a" to="/info"  >
                <span id="bottom-recipe"></span>
                <p>资讯</p>
                </router-link>
            </li>
            <li>
            <router-link tag="a" to="/my">
                <span id="bottom-user"></span>
                <p>我的</p>
            </router-link>
            </li>
        </ul>
            </div>
            <!-- 评论功能 -->
            <transition
                @before-enter="beforeEnterFun"
                @enter="enterFun"
                @after-enter="afterEnterFun"
                >
                <div v-if="flag" class="commet">
                    <div class="commet-box">
                        <div class="commet-title"><span @click="flag=!flag" ><svg t="1667302707868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2250" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><path d="M384 512L731.733333 202.666667c17.066667-14.933333 19.2-42.666667 4.266667-59.733334-14.933333-17.066667-42.666667-19.2-59.733333-4.266666l-384 341.333333c-10.666667 8.533333-14.933333 19.2-14.933334 32s4.266667 23.466667 14.933334 32l384 341.333333c8.533333 6.4 19.2 10.666667 27.733333 10.666667 12.8 0 23.466667-4.266667 32-14.933333 14.933333-17.066667 14.933333-44.8-4.266667-59.733334L384 512z" p-id="2251"></path></svg></span>评论：{{this.num}}</div>
                        <input type="text" placeholder="说点什么吧..." @keyup.enter="adddata" v-model="valne" >
                        <ul>
                            <li v-for="(item,index) in commentdata" :key="index">
                                <img :src="item.img" alt="">
                                <div>
                                    <h3>{{item.name}}</h3>
                                    <p>{{item.item}}</p>
                                    <p class="time">{{item.date}}</p>
                                </div>
                                
                            </li>
                        </ul>
                        
                    </div>
                </div>
            </transition>
    </div>
</template>

<script>
import {getsnackdata} from "../api/home.js";
    export default {
        data() {
            return {
                zxitemlists: null,
                ind:0,
                num:2,
                flag:false,
                commentdata:null,
                valne:null,
                read:81,
            };
        },
        methods:{
            // 展开阅读控制
            openlists(){
                this.ind = 1 ;
                this.read +=1;
            },
            // 评论输入框
            adddata(){
                var today = new Date();
                let tiem =  today.getFullYear() + "/" + (today.getMonth()+1) + "/" + today.getDate() + " " + today.getHours() +":"+today.getMinutes()+":"+today.getSeconds();
                let datas= {"img":"../assets/img/头像.jpg","name":"咖啡猫","item":this.valne,"date":tiem};
                this.commentdata.push(datas);
                this.num=this.commentdata.length;
                this.valne=null;
                window.localStorage.setItem("comment",JSON.stringify(this.commentdata));
                let item = JSON.parse(window.localStorage.getItem("comment"));
                console.log(item);
                console.log(datas);
                console.log(tiem);
            },
            // 点击弹出评论框
            comment(){
                this.flag = !this.flag ;
            },
             // 进入前
                beforeEnterFun(el){
                    // console.log("beforeEnterFun",el);
                    el.style.transform="translate(0,667px)"
                },
                // 进入前到进入后中执行过程
                enterFun(el,done){
                    // 直接添加动画显示不了效果
                    el.offsetWidth; //强制刷新动画效果
                    // console.log("enterFun");
                    el.style.transform="translate(0,0)";
                    el.style.transition = "all 0.5s ease";
                    // 调用done()方法，直接进入 afterEnterFun() 不需要等待
                    done();
                },
                //进入后
                afterEnterFun(){
                    console.log("afterEnterFun");
                }

        },
        created(){
            getsnackdata().then(data=>{
                this.zxitemlists = data.data;
                // window.localStorage.setItem("comment",JSON.stringify(data.comment));
                let item = JSON.parse(window.localStorage.getItem("comment"));
                console.log(item);
                if(item){
                    this.commentdata = item;
                    this.num=this.commentdata.length;
                }else{
                    this.commentdata = data.comment ;
                }
            });

        },
        // 默认在顶部
        mounted(){ 
            window.scrollTo(0,0)
        }
    }
</script>

<style lang="scss" >
@import "../assets/css/snack.css";
@import "../assets/css/specifics.css";
.snack{
    background-color: #fff;
}
.commet{
    width: 100%;
    height: 100%;
    // background-color: rgba(0, 0, 0, 0.2);
    z-index: 1000;
    position: fixed;
    bottom: 0px;
    .commet-box{
        height: 70%;
        padding: 16px;
        margin-top:45% ;
        background-color: rgb(245, 245, 245);
        position: relative;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        .commet-title{
            width: 100%;
            text-align: center;
            span{
                float: left;
            }
        }
    }

}

.commet-box input{
    width: 100%;
    height: 24px;
    text-indent: 1em;
    margin-top: 16px;
    border: 0px;
    border-radius: 12px;
    box-shadow: 0px 0px 0px 2px #ebedf0;
    color: #666;
}
.commet-box ul {
    margin-top: 16px;
}
.commet-box ul li{
    width: 100%;
    margin-bottom: 16px;
    img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 8px;
        vertical-align: top;
        margin-top: 8px;
    }
    div{
        width: 85%;
        max-height: 100px;
        display: inline-block;
        overflow: hidden;
        h3{
            height: 26px;
            font-size: 16px;
            text-align: left;
            line-height: 26px;
            margin-bottom:4px ;
        }
        p{
            width: 100%;
            max-height: 50px;
            font-size: 14px;
            color: #666;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-bottom: 4px;
        }
        .time{
            width: 100%;
            height: 16px;
            line-height: 16px;
            color: #999;
            font-size: 12px;

        }

    }
}

.zxitempl{
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    color: #666;
}
</style>